<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted, nextTick, watch, inject } from "vue";
import { eventBus } from "@/views/all/visual/template/utils/eventBus";
const props = withDefaults(
  defineProps<{
    propValue?: {
      excludes?: [];
      activeName?: string;
      hasHse?: boolean;
    };
  }>(),
  {
    propValue: () => ({
      excludes: [],
      activeName: "depelector",
      hasHse: false
    })
  }
);
const middleComp = inject("middleComp", ref([]));
const rightComp = inject("rightComp", ref([]));
const globalClassName = inject("globalClassName");

const emits = defineEmits(["generalEvent"]);
const imgArr: Record<string, any>[] = [];
const activeName = ref("depelector");
let compArr = ["depmech", "depelector", "depwater", "depair", "dephse"];
const maps = {
  depelector: "ELECTRICTITY", //电科
  depair: "GAS", //气化科
  depmech: "MACHINE", //机械科
  depwater: "WATER", //水科
  fab: "FAB",
  dephse: "HSE"
};
const titleList = ref(["机械科", "电科", "水科", "气化科", "HSE"]);
const { setClassName } = inject("className", { setClassName: name => name });
let depMaps = {
  ELECTRICTITY: [],
  GAS: [],
  MACHINE: [],
  WATER: [],
  FAB: [],
  HSE: []
};
watch(
  [middleComp.value, rightComp.value],
  newVal => {
    // middleComp.value.forEach(data => {
    //   const { item } = data;
    //   const { classConfig, propValue } = item;
    // });
    if (!props.propValue.hasHse) {
      titleList.value = ["机械科", "电科", "水科", "气化科"];
      compArr = ["depmech", "depelector", "depwater", "depair"];
    } else {
      titleList.value = ["机械科", "电科", "水科", "气化科", "HSE"];
      compArr = ["depmech", "depelector", "depwater", "depair", "dephse"];
    }
    rightComp.value.forEach(data => {
      if (!data) return;
      const { item, rawData } = data;
      if (!item) return;
      const { classConfig, propValue, id } = item;
      if (!classConfig) return;
      const { className } = rawData;
      if (className) {
        depMaps[className].push(id);
      }
    });
    for (let i = 0; i < compArr.length; i++) {
      let comp = defineAsyncComponent(() => import(`../../assets/filter/${compArr[i]}.svg?component`));
      let disabled = props.propValue?.excludes?.indexOf(compArr[i]) !== -1 ? true : false;
      if (!props.propValue?.excludes) {
        disabled = false;
      }
      if (globalClassName) {
        if (!disabled) {
          disabled = !globalClassName?.includes(maps[compArr[i]]) ? true : false;
        }
        if (maps[compArr[i]] === "HSE" && props.propValue.hasHse) disabled = false;
        if (globalClassName?.includes(maps[compArr[i]]) || (maps[compArr[i]] === "HSE" && props.propValue.hasHse)) {
          generalEvent({
            comp,
            name: compArr[i],
            disabled
          });
        }
      } else if (compArr[i] === props.propValue.activeName) {
        generalEvent({
          comp,
          name: compArr[i],
          disabled
        });
      }

      let val = {
        comp,
        name: compArr[i],
        disabled
      };
      imgArr.push(val);
    }
  },
  { immediate: true, once: true }
);

watch(
  () => props.propValue.excludes,
  () => {
    imgArr.forEach(item => {
      let disabled = props.propValue?.excludes?.indexOf(maps[item.name]) !== -1 ? true : false;
      if (!props.propValue?.excludes) {
        disabled = false;
      }
      item.disabled = disabled;
    });
  }
);
watch(
  () => props.propValue.activeName,
  newVal => {
    if (newVal) {
      activeName.value = newVal;
    }
  }
);
// watch(activeName, () => {
//   if (activeName.value) {
//     debugger;
//   }
// });
function generalEvent(item) {
  try {
    if (item.disabled) {
      return;
    }
    activeName.value = item.name;
    // console.log("generalEvent", item.name);
    // emits("generalEvent", { type: "compFilter", compEmitData: maps[item.name] });
    for (let key in depMaps) {
      const arr = depMaps[key];
      if (key === maps[item.name]) {
        arr.forEach(id => {
          changeStyle("display", "block", id);
        });
      } else {
        arr.forEach(id => {
          changeStyle("display", "none", id);
        });
      }
    }
    setClassName(maps[item.name]);
  } catch (e) {
    console.log(e);
  }
}
function changeStyle(styleName, value, compId = null) {
  eventBus.emit("changeStyle", { styleName, value, compId });
}
onMounted(() => {
  // activeName.value = props.propValue.activeName;
  // nextTick(() => {
  //   emits("generalEvent", { type: "compFilter", compEmitData: maps[activeName.value] });
  //   setClassName(maps[activeName.value]);
  // });
});
function setClass(item, isIcon = false) {
  let style = {};
  if (isIcon) {
    if (!item.disabled) {
      style = {
        hover: "text-[#3B82F6]",
        active: "text-[#3B82F6]"
      };
    }
    return style;
  }
  if (!item.disabled) {
    style = {
      "text-[#3B82F6]": activeName.value === item.name,
      "bg-[#FFF]": activeName.value === item.name,
      "text-gray-500": activeName.value !== item.name
    };
    if (!isIcon) {
      style = { ...style, "dep-filter-active": activeName.value === item.name };
    }
  } else {
    style = {
      "text-[#C6C6C6]": true
    };
  }
  return style;
}
</script>

<template>
  <div class="bg-[#fff] rounded flex flex-col justify-between content-between">
    <div
      v-for="(item, index) in imgArr"
      :key="item.name"
      class="w-[64px] h-[56px] rounded cursor-pointer grow-0 shrink-0 flex flex-col justify-center items-center dep-filter-item"
      :class="setClass(item)"
      @click="generalEvent(item)"
    >
      <component :is="item.comp" class="w-[24px] h-[24px]" :class="setClass(item, true)" />
      <span class="leading-5 text-sm">{{ titleList[index] }} </span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.dep-filter-item {
  position: relative;
}

.dep-filter-active {
  &::before {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 3px;
    height: 80%;
    margin-right: 6px;
    vertical-align: middle;
    content: "";
    background: #3b82f6;
    border-radius: 0 100px 100px 0;
  }
}
</style>
